<template>
	<up-popup :show="showPopup" :safe-area-inset-bottom="true" mode="bottom" :round="16" @close="closePopup">
		<view class="popup-bottom-container">
			<template v-if="suitable_humans.length">
				<view class="popup-header mt-40">适用人群</view>
				<view class="suitable">
					{{ formatSuitableHumans(suitable_humans) }}
				</view>
			</template>
			<view class="popup-header">使用须知</view>
			<view class="popup-close" @click="closePopup"></view>
			<view class="popup-content safe-bottom-wrap ticket-rule">
				<view>
					<view class="rule-item" v-for="(item, index) in listData" :key="index">
						<view class="fs-32 font-bold">{{ item.title }}</view>
						<view class="rule-content">{{ item.content }}</view>
					</view>
				</view>
			</view>
		</view>
	</up-popup>
</template>
<script setup lang="ts">
const props = defineProps({
	modelValue: Boolean,
	listData: {
		type: Array,
		default: [],
	},
	suitable_humans: {
		type: Array,
		default: [],
	},
})
const emit = defineEmits(["update:modelValue"])

const showPopup = ref(props.modelValue)
const formatSuitableHumans = (list: any[]) => {
	return list.map((item: any) => item.title).join("或")
}
watch(
	() => props.modelValue,
	(newVal) => {
		showPopup.value = !!newVal
	}
)

// 处理关闭按钮点击
const closePopup = () => {
	showPopup.value = false
	emit("update:modelValue", false)
}
</script>

<style scoped lang="scss">
.suitable {
	color: #303133;
	background-color: rgba(254, 224, 56, 0.1);
	border-radius: 16rpx;
	margin: 18rpx 26rpx;
	padding: 22rpx;
}
.rule-item {
	padding: 32rpx 0 32rpx 18rpx;
	&:last-child {
		padding-bottom: 0;
		border-bottom: none;
	}

	.rule-content {
		font-size: 28rpx;
		color: $c-black-_6;
		margin-top: 16rpx;
		line-height: 1.5;
	}
}
</style>
